<?php
include_once('../global.php');
$show = $_GET['show'];
$roundtext = array(
  1 => '第一轮',
  2 => '第二轮',
  3 => '决赛轮',
  4 => '',
);
?>
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  
  <!-- 假设您已经在全局 CSS 中引入了 Poppins 和 Pangmen 字体 -->
  <!-- 如果未引入，请确保在全局 CSS 或此处引入相应字体 -->

  <link href="<?php echo CSS_PATH ?>index.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="<?php echo JS_PATH ?>jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="<?php echo JS_PATH ?>main.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <title>我的海报-<?php echo $match_cn_name ?></title>

  <style>
    /* 样式优化 */
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #0d2a35;
      color: white;
      display: flex;
      align-items: center;
      height: 100vh;
      overflow: scroll;
      flex-direction: column;
    }

    .index_news {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .poster-generator {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-bottom: 50px;
    }

    #posterCanvas {
      width: 90%;
      max-width: 656px;
      max-height: 978px;
      border-radius: 8px;
      background-color: #fff;
    }

    .poster-controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
    }

    .poster-controls button {
      padding: 12px 20px;
      font-size: 16px;
      background-color: #007b5e;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      max-width: 300px;
      min-width: 150px;
    }

    .poster-controls button:hover {
      background-color: #005944;
    }

    #sta {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      text-align: center;
    }

    #sta img {
      width: 350px;
      height: 80px;
    }
  </style>
</head>

<body>
  <div id="sta">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td style="text-align:center;"><img src="./images/000.png" style="width:350px;height:80px" /></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="index_news">
    <!-- 海报生成区域 -->
    <div id="poster-generator" class="poster-generator">
      <!-- 默认图片展示 -->
      <img id="defaultImage" src="./images/matcheventlisticon-11.png" style="display:none;" />
      <!-- 画布 -->
      <canvas id="posterCanvas" width="656" height="978"></canvas>
      <!-- 控制按钮 -->
      <div class="poster-controls">
        <input type="file" id="uploadImage" accept="image/*" style="display:none;" />
        <button id="uploadButton">重新上传</button>
        <button id="downloadPoster">下载海报</button>
        <button onclick="goback()">返回</button>
      </div>
    </div>
  </div>

  <script>
    // 初始化变量
    const canvas = document.getElementById('posterCanvas');
    const ctx = canvas.getContext('2d');
    const uploadButton = document.getElementById('uploadButton');
    const uploadImage = document.getElementById('uploadImage');
    const downloadPoster = document.getElementById('downloadPoster');
    const defaultImage = document.getElementById('defaultImage');

    // 默认背景图
    let backgroundImage = new Image();
    backgroundImage.src = defaultImage.src;

    // 确保图片加载完成后绘制
    backgroundImage.onload = () => {
      drawPoster();
    };

    uploadButton.addEventListener('click', () => {
      uploadImage.click();
    });

    uploadImage.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
          backgroundImage.src = event.target.result;
        };
        reader.readAsDataURL(file);
      }
    });

    // 技术统计数据
    const statsData = [
      {
        value: '265.0',
        comparison: '(265.2)',
        trend: '▼',
        desc: '开球距离'
      },
      {
        value: '79.5%',
        comparison: '(41.8%)',
        trend: '▲',
        desc: '上球道率'
      },
      {
        value: '66.7%',
        comparison: '(31.2%)',
        trend: '▲',
        desc: '上果岭率'
      },
      {
        value: '30.0',
        comparison: '(18.9)',
        trend: '▲',
        desc: '平均推杆数'
      },
      {
        value: '1.8',
        comparison: '(1.8)',
        trend: '',
        desc: 'GIR推杆数'
      },
      {
        value: '6.7',
        comparison: '(10.6)',
        trend: '▼',
        desc: '每轮1推数'
      },
      {
        value: '50%',
        comparison: '(40%)',
        trend: '▲',
        desc: '救球率'
      },
      {
        value: '1.0',
        comparison: '(0.8)',
        trend: '▼',
        desc: '每轮3+推数'
      },
    ];

    // 绘制海报
    function drawPoster() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制背景图片
      ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

      // 添加标题
      drawHeader();

      // 绘制技术统计表格和雷达图
      drawStatsAndRadar();
    }

    // 绘制标题和副标题
    function drawHeader() {
      const title = '2024 BMW青少年高尔夫 技术统计';
      const subtitle = '选手: 吕梓宸 (男子A组-平均数据)';

      // 绘制标题
      ctx.fillStyle = '#333';
      ctx.font = 'bold 22px Poppins'; // 数字和英文使用 Poppins
      ctx.textAlign = 'center';
      ctx.fillText(title, canvas.width / 2, 50);

      // 绘制副标题
      ctx.fillStyle = '#666';
      ctx.font = '16px Pangmen'; // 中文使用 Pangmen
      ctx.fillText(subtitle, canvas.width / 2, 80);
    }

    // 绘制技术统计表格和雷达图
    function drawStatsAndRadar() {
      // 技术统计表格和雷达图的宽度和位置
      const contentWidth = canvas.width - 100; // 两边各留50px
      const contentX = 50;
      const statsY = 430; // 从标题下方开始绘制表格
      const cellHeight = 90;

      // 计算总行数
      const rows = Math.ceil(statsData.length / 4); // 4列
      const statsHeight = rows * cellHeight; // 总高度

      // 绘制技术统计表格
      drawStatsGrid(contentX, statsY, contentWidth, cellHeight).then(() => {
        // 绘制雷达图紧靠表格下方
        const radarChartY = statsY + statsHeight; // 贴在一起
        renderRadarChart(contentX, radarChartY, contentWidth);
      });
    }

    // 绘制技术统计表格
    function drawStatsGrid(startX, startY, totalWidth, cellHeight) {
      return new Promise((resolve) => {
        const cols = 4; // 4列
        const cellWidth = totalWidth / cols; // 每列宽度
        const rows = Math.ceil(statsData.length / cols); // 计算总行数
        const totalHeight = rows * cellHeight; // 计算表格总高度

        // 绘制半透明黑色背景
        ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
        ctx.fillRect(startX, startY, totalWidth, totalHeight);

        ctx.textAlign = 'center';

        statsData.forEach((item, index) => {
          const col = index % cols;
          const row = Math.floor(index / cols);

          const x = startX + col * cellWidth;
          const y = startY + row * cellHeight;

          // 数值部分
          ctx.fillStyle = '#fff';
          ctx.font = 'bold 22px Poppins'; // 数字和英文使用 Poppins
          ctx.fillText(item.value, x + cellWidth / 2, y + 30);

          // 比较值和趋势箭头
          ctx.font = '14px Poppins'; // 数字和英文使用 Poppins
          ctx.fillText(item.comparison, x + cellWidth / 2, y + 50);
          if (item.trend === '▲') {
            ctx.fillStyle = '#ff0000'; // 红色向上箭头
            ctx.fillText('▲', x + cellWidth / 2 + 50, y + 50);
          } else if (item.trend === '▼') {
            ctx.fillStyle = '#ffd700'; // 黄色向下箭头
            ctx.fillText('▼', x + cellWidth / 2 + 50, y + 50);
          }

          // 描述部分
          ctx.fillStyle = '#fff';
          ctx.font = '14px Pangmen'; // 中文使用 Pangmen
          ctx.fillText(item.desc, x + cellWidth / 2, y + 75);
        });

        resolve();
      });
    }

    // 绘制雷达图
    function renderRadarChart(chartX, chartY, chartWidth) {
      return new Promise((resolve) => {
        const chartHeight = 300; // 雷达图高度
        const chartDiv = document.createElement('div');
        chartDiv.style.width = chartWidth + 'px';
        chartDiv.style.height = chartHeight + 'px';
        chartDiv.style.position = 'absolute';
        chartDiv.style.left = '-9999px'; // 移出可视区域
        document.body.appendChild(chartDiv);

        const radarChart = echarts.init(chartDiv);

        const option = {
          backgroundColor: 'rgba(255, 255, 255, 1)', // 设置图表背景为白色
          title: {
            text: '',
            left: 'center',
            textStyle: { fontSize: 16, color: '#333' }
          },
          tooltip: {},
          legend: {
            data: ['吕梓宸', '男子A组平均'],
            bottom: 10,
            textStyle: { fontSize: 14, color: '#333' }
          },
          radar: {
            indicator: [
              { name: '开球距离', max: 300 },
              { name: '上球道率', max: 100 },
              { name: '上果岭率', max: 100 },
              { name: '一推数', max: 15 },
              { name: '救球率', max: 100 }
            ],
            shape: 'circle',
            splitNumber: 5,
            name: {
              textStyle: { color: '#666', fontSize: 12 }
            },
            splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.3)' } }, // 分割线颜色稍微透明
            splitArea: { areaStyle: { color: 'rgba(0, 0, 0, 0)' } }, // 分割区域背景透明
            axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 1)' } } // 轴线颜色为黑色
          },
          series: [{
            name: '选手 vs 平均',
            type: 'radar',
            data: [
              {
                value: [265, 79.5, 66.7, 6.7, 50],
                name: '吕梓宸',
                itemStyle: { color: '#ff4500' }, // 红色
                lineStyle: { width: 2, color: '#ff4500' },
                areaStyle: { color: 'rgba(255,69,0,0.3)' } // 红色半透明填充
              },
              {
                value: [265.2, 41.8, 31.2, 10.6, 40],
                name: '男子A组平均',
                itemStyle: { color: '#ffd700' }, // 黄色
                lineStyle: { width: 2, color: '#ffd700' },
                areaStyle: { color: 'rgba(255,215,0,0.3)' } // 黄色半透明填充
              }
            ]
          }]
        };

        radarChart.setOption(option);

        // 等待图表渲染完成
        radarChart.on('finished', function () {
          const chartCanvas = radarChart.getRenderedCanvas({
            pixelRatio: 1,
            backgroundColor: 'rgba(255, 255, 255, 1)' // 设置画布背景为白色
          });

          // 在海报上绘制雷达图
          ctx.drawImage(chartCanvas, chartX, chartY, chartWidth, chartHeight);

          // 移除临时的div
          document.body.removeChild(chartDiv);

          resolve();
        });
      });
    }

    // 下载海报
    downloadPoster.addEventListener('click', () => {
      const link = document.createElement('a');
      link.download = 'poster.png';
      link.href = canvas.toDataURL('image/png');
      link.click();
    });

    function goback() {
      window.history.back();
    }
  </script>
</body>

</html>